<template>
  <div class="container">
    <el-menu :default-active="defaultDctive" class="transparent-background el-menu-demo" ref="menu">

      <el-menu-item v-for="menu in arrlists" :key="menu.id" :index="menu.id" @click="generatorPath(menu.id, menu)">
        <i :class="menu.icon" class="iconfont"></i>
        <span>{{ menu.name }}</span>
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { getUserPermissionByToken } from '@/api/sys/power'
import { initCheck } from '@/api/init'
import { settinglist } from '@/api/request'

export default {
  name: 'NavTop',
  data() {
    return {
      arrlists: [],
      defaultDctive: '',
      backupArrlist: [], //备份数据
      remainingData: [],
      isCollapse: false,
      windowWidth: window.innerWidth,
    }
  },
  computed: {
    ...mapState(['setAndHistory', 'IsSetting', 'currentMenu']),
  },
  watch: {
    IsSetting(newv) {
      this.defaultDctive = ''
    },
    currentMenu: {
      handler(newVal, oldVal) {
        this.defaultDctive = newVal
        localStorage.setItem('menuId', newVal)
      },
      deep: true,
    },
  },
  created() {
    // 初始化监测  根据监测到数据来掉接口
    this.initCheck()
  },
  mounted() { },

  methods: {
    ...mapActions(['getSetAndHistory']),
    // 初始化 检查ip是否被注册
    async initCheck() {
      /**
       * true   代表已经被注册 不弹出注册界面
       * false  代表没有被注册 弹出注册界面
       */
      const res = await initCheck()
      if (res.data.code == 200) {
        if (!res.data.data) {
          this.$router.push({ path: '/' })
        } else {
          // 进入界面的时候进行数据处理，并将数据赋值给arrlists
          this.getPowerMenu()
          this.getSettingList()
        }
      } else {
        this.$router.push({ path: '/' })
      }
    },
    getSettingList() {
      settinglist().then((res) => {
        if (res.data.code == 200) {
          this.ruleForm = res.data.data[0]
          localStorage.setItem('cmPageNo', res.data.data[0].cmPageNo)
          this.$store.dispatch('getSettingFields', res.data.data[0])
        }
      })
    },
    // 回显状态的方法
    echoState() {
      // 如果备份数组列表不为空
      if (this.backupArrlist.length !== 0) {
        // 从本地存储中获取菜单id
        const menuId = localStorage.getItem('menuId')
        // 如果菜单id存在
        if (menuId) {
          // 找到菜单id对应的项
          const item = this.backupArrlist.find((item) => item.id === menuId)
          // 将默认激活的菜单id设置为item的id
          this.defaultDctive = item.id
          this.generatorPath(this.defaultDctive, item)
        } else {
          // 如果菜单id不存在，则将默认激活的菜单id设置为备份数组列表的第一项的id
          this.defaultDctive = this.backupArrlist[0].id
          this.generatorPath(this.defaultDctive, this.arrlists[0])
        }
      }
    },

    // 获取权限菜单的列表
    getPowerMenu() {
      getUserPermissionByToken().then((res) => {
        if (res.status == 200) {
          // 获取权限菜单的列表
          // 过滤掉系统设置的对象
          const arr = res.data.data.menu
          this.$store.commit('getAllMenu', arr)
          this.arrlists = res.data.data.menu.filter((item) => item.name !== '系统设置')
          if (this.arrlists.length === 0) {
            this.$emit('toggleSideBar')
          }
          // this.arrlists = res.data.data.menu
          this.backupArrlist = res.data.data.menu
          this.$store.commit('getPowerMenu', this.backupArrlist)
          this.defaultDctive = localStorage.getItem('menuId')
          this.getSetAndHistory()
          this.echoState()
        }
      })
    },
    generatorPath(id, menu) {
      this.defaultDctive = id
      this.$store.commit('getChildrenMenu', menu.children)
      localStorage.setItem('menuId', id)
      const path = localStorage.getItem('path')

      // 判断menu.children中是否存在path，如果有的话就为true，否则为false
      const isPath = menu.children.some((item) => item.href === path)
      if (isPath) {
        this.$router.push({ path: path })
      } else {
        console.log('111111 跳转', menu.children[0]);
        
        // 否则，跳转到menu.children[0].href
        this.$router.push({ path: menu.children[0].href })
        // 将menu存入store的getvisited中
        this.$store.commit('getvisited', menu.children[0])
      }
    },

    removeEmptyChildren(arr) {
      // 遍历数组arr
      for (let i = 0; i < arr.length; i++) {
        // 如果arr[i]没有children属性或者children属性的长度为0
        if (!arr[i].child || arr[i].child.length === 0) {
          // 删除arr[i]的children属性
          delete arr[i].child
        } else {
          // 递归调用removeEmptyChildren函数，传入arr[i]的children属性
          this.removeEmptyChildren(arr[i].child)
        }
      }
      // 返回处理后的数组arr
      return arr
    },
  },
  // destroyed() {
  //   window.removeEventListener('resize', this.handleResize)
  // },
}
</script>

<style lang="less" scoped>
.container {
  overflow-y: scroll;
  height: 80vh;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: transparent;
  display: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: hsla(220, 4%, 58%, 0.3);
}

.transparent-background {
  background-color: transparent;
}

.el-menu--horizontal>.el-menu-item.is-active {
  background: var(--menuItemHoverBackgroundColor) !important;
}

.el-menu-demo {
  border: none;
  // li:nth-child(11),
  // li:nth-child(12) {
  //   display: none;
  // }
}

.el-menu-item {
  .el-icon-location {
    color: #fff;
  }
}

.el-dropdown-link {
  color: #fff;
}

@media screen and (min-width: 600px) and (max-width: 1919px) {
  .el-menu-item {
    padding: 0 10px;
  }
}

@media screen and (min-width: 1920px) and (max-width: 3840px) {
  .el-menu-item {
    padding: 0 20px;
  }
}
</style>
